<%--
  Created by IntelliJ IDEA.
  User: app
  Date: 2018/7/28
  Time: 下午9:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<%
    String[] tags=(String[]) session.getAttribute("tags");
    int index = 0;
%>
<body background="/static/image/night.jpg" style="background-size: cover;background-color: transparent">
<head>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="/static/css/masonry-docs.min.js"></script>
    <link rel="stylesheet" href="/static/css/loadingStyle.css">
    <title>请选择标签</title>
    <style>
        #content{
            margin:0 auto;
            width: 1000px;
        }

        #tags{
            position: relative;
            padding: 0px;
        }
        .select-box{
            margin-bottom: 20px;
            position:fixed;
            left:50%;
            top:50%;
            text-align: center;
            vertical-align: middle;
            line-height: 70px;
            font-size: larger;
            border: 0.5px solid #333;
            border-color: hsla(0, 0%, 0%, 0.5);
            border-radius: 5px;
        }
        .select-box:hover {
            background: white;
            border-color: white;
            cursor: pointer;
        }
        .box {
            color: white;
            position:fixed;
            left:50%;
            top:50%;
            /*margin-left:width/2;*/
            /*margin-top:height/2;*/

            margin-bottom: 20px;
            float: left;
            text-align: center;
            vertical-align: middle;
            line-height: 70px;
            font-size: larger;
            border: 0.5px solid #333;
            border-color: hsla(0, 0%, 0%, 0.5);
            border-radius: 5px;
        }
        .box:hover {
            background: white;
            border-color: white;
            color: black;
            cursor: pointer;
        }

        .btn-color1 { background-color: #fe4365;}
        .btn-color2 { background-color: #fc9d9a;}
        .btn-color3 { background-color: #f9cdad;}
        .btn-color4 { background-color: #c8c8a9;}
        .btn-color5 { background-color: #83af9b;}

        .btn-color6 { background-color: #823935;}
        .btn-color7 { background-color: #89beb2}
        .btn-color8 { background-color: #c9ba83}
        .btn-color9 { background-color: #ded38c}
        .btn-color10 { background-color: #de9c53;}
        .btn-color11 { background-color: #458994;}
        .btn-color12 { background-color: #274862;}
        .btn-color13 { background-color: #995054;}
        .btn-color14 { background-color: #d96831;}
        .btn-color15 { background-color: #e6b33d;}

        .grid-item--width2 { width: 140px; }
        .grid-item--width3 { width: 140px; }
        .grid-item--width4 { width: 140px; }
        .grid-item--width5 { width: 140px; }
        .grid-item--width6 { width: 140px; }
        .grid-item--width7 { width: 140px; }

        .grid-item--height2 { height: 70px; }
        .grid-item--height3 { height: 90px; }
        .grid-item--height4 { height: 110px; }
        .grid-item--height5 { height: 90px; }
        .grid-item--height6 { height: 90px; }
        .grid-item--height7 { height: 110px; }
    </style>
</head>
<body>

<%--.btn-color2 { background-color: #FF0000; }--%>
<%--.btn-color3 { background-color: #FF7F00; }--%>
<%--.btn-color4 { background-color: #FFFF00; }--%>
<%--.btn-color5 { background-color: #00FF00; }--%>
<%--.btn-color6 { background-color: #00FFFF; }--%>
<%--.btn-color7 { background-color: #0000FF; }--%>
<%--.btn-color8 { background-color: #8B00FF; }--%>

<div id="content">
    <%--<center>--%>
    <div id="container">
        <form action="updateTagAction" id="tagSubmit" method="post" onsubmit="return checkTagForm()">
            <div id="hasSelected">

            </div>
            <h2 class="tag" style="padding-top: 20px">
                Now，选择你喜欢的类型：
            </h2>
            <input id="selectCount" type="text" value="0" name="selectCount" hidden>
            <input id="tag_register" type="text" value="${tag_register}" name="tag_register" hidden>
            <input type="submit" value="提交" id="submit" style="font-size:15px;background-color:white;border-color:white;height: 40px;width: 80px;border-radius:5px" onclick="tagSubmit()">
        </form>
        <div id="tags" class="container-fluid clickable">
            <div class="box btn-color1 grid-item--width3 grid-item--height4"><%=tags[index++]%></div>
            <div class="box btn-color2 grid-item--width2 grid-item--height3"><%=tags[index++]%></div>
            <div class="box btn-color3 grid-item--width4 grid-item--height2"><%=tags[index++]%></div>
            <div class="box btn-color4 grid-item--width6 grid-item--height4"><%=tags[index++]%></div>
            <div class="box btn-color5 grid-item--width5 grid-item--height5"><%=tags[index++]%></div>
            <div class="box btn-color6 grid-item--width7 grid-item--height3"><%=tags[index++]%></div>
            <div class="box btn-color7 grid-item--width3 grid-item--height6"><%=tags[index++]%></div>
            <div class="box btn-color8 grid-item--width4 grid-item--height7"><%=tags[index++]%></div>
            <div class="box btn-color9 grid-item--width5 grid-item--height5"><%=tags[index++]%></div>
            <div class="box btn-color10 grid-item--width6 grid-item--height4"><%=tags[index++]%></div>
            <div class="box btn-color11 grid-item--width7 grid-item--height3"><%=tags[index++]%></div>
            <div class="box btn-color12 grid-item--width4 grid-item--height5"><%=tags[index++]%></div>
            <div class="box btn-color13 grid-item--width5 grid-item--height2"><%=tags[index++]%></div>
            <div class="box btn-color14 grid-item--width3 grid-item--height2"><%=tags[index++]%></div>
            <div class="box btn-color15 grid-item--width7 grid-item--height7"><%=tags[index++]%></div>

        </div>

        <div>
            <button id="load-more" style="font-size:15px;background-color:white;border-color:white;height: 40px;width: 80px;border-radius:5px">更多</button>
        </div>

    </div>
    <%--</center>--%>


</div>
<div id="loading" class="loader">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>



</body>
<script>
    var page = 1;
    var colorsForTag_1 = [
        "btn-color1" ,
        "btn-color2" ,
        "btn-color3" ,
        "btn-color4" ,
        "btn-color5" ,
    ];
    var colorsForTag_2 = [
        "btn-color6" ,
        "btn-color7" ,
        "btn-color8" ,
        "btn-color9" ,
        "btn-color10" ,
    ];
    var colorsForTag_3 = [
        "btn-color11" ,
        "btn-color12" ,
        "btn-color13" ,
        "btn-color14" ,
        "btn-color15" ,
    ];
    var widthsForTag = [
        'grid-item--width2',
        'grid-item--width3',
        'grid-item--width4',
        'grid-item--width5',
        'grid-item--width6',
        'grid-item--width7',
    ];
    var heightsForTag = [
        'grid-item--height2',
        'grid-item--height3',
        'grid-item--height4',
        'grid-item--height5',
        'grid-item--height6',
        'grid-item--height7',
    ];

    function checkTagForm() {
        if (count_select <= 0){
            alert("亲请选择至少一个标签哟！-_-")
            return false;
        }
        return true;
    }

    var count_select = 0;
    var count_mark = document.getElementById('selectCount');
    var container = document.getElementById('tags');
    var has = document.getElementById("hasSelected");
    $(function () {
        $hasSelected = $('#hasSelected');
        $hasSelected.masonry({
            itemSelector: '.select-box',
            // gutter: 6,
            isAnimated: true,
            isFitWidth:true
        });
        var msnry = new Masonry( $hasSelected, {
            columnWidth: 100
        });
        eventie.bind( has, 'click', function( event ) {
            if ( !classie.has( event.target, 'select-box' ) ) {
                return;
            }
            $hasSelected.masonry( 'remove', event.target );
            var elems = [];
            var element = addElement(getRandomInt(0,15),event.target.textContent);
            elems.push(element);
            $('#tags').append(elems);
            $('#tags').masonry( 'appended', elems );
            $('#tags').masonry();
            $hasSelected.masonry();
            count_select--;
            count_mark.value = count_select;
            // layout remaining item elements
        });
    });
    $(function () {
        $con = $('#tags');
        load_more = document.getElementById('load-more')
        $con.masonry({
            itemSelector: '.box',
            gutter: 6,
            isAnimated: true,
            isFitWidth:true
        });
        var msnry = new Masonry( $con, {
            columnWidth: 1000
        });
        eventie.bind(load_more, 'click', function(){
            $("#loading").show();
            $.ajax({
                type: "GET",
                url: "tagAction?page="+page,
                dataType:"json",
                error:function () {
                    alert("错误");
                    sleep(1000)
                    $('#loading').hide(0);
                },
                success:function (msg) {
                    if(msg == 'NO_MORE')
                        alert('没有更多标签了')
                    else {
                        addElementsByJSon(msg)
                    }
                    sleep(1000)
                    $('#loading').hide(0);
                    page++;
                }
            });
            $con.masonry()
        });
        eventie.bind( container, 'click', function( event ) {
            if ( !classie.has( event.target, 'box' ) ) {
                return;
            }
            if (count_select >= 6) {
                alert("最多选择六个标签");
                return;
            }

            $con.masonry( 'remove', event.target )
            var elems = []
            var selectedElement = addSimple(event.target.textContent);
            elems.push(selectedElement)
            $('#hasSelected').append(elems);
            $('#hasSelected').masonry( 'appended', elems );
            $con.masonry()
            $('#hasSelected').masonry();
            count_select++;
            count_mark.value = count_select;
            // layout remaining item elements
        });
    });

    function addSimple(val) {
        var element = document.createElement('input');
        var name = 'user_tag'+(count_select+1);
        element.id = name;
        element.classList.add('select-box');
        element.style = 'font-size:15px;background-color:white;color:red;height: 40px;width: 100px;border:red 1px solid;border-radius:5px;margin-top:10px;margin-right:10px'
        element.readOnly = true;
        element.innerHTML = val;
        element.type = 'text';
        element.name = name;
        element.value = val;
        // $('#'+name).val(val);
        return element;
    }
    function addElementsByJSon(msg) {
        var elems = [];
        for (var i = 0;i<15;i++){
            var element = addElement(i,msg[i]);
            elems.push(element)
        }
        $('#tags').append(elems);
        $('#tags').masonry( 'appended', elems )
        $('#tags').masonry();
    }

    function addElement(index,value) {
        var element = document.createElement('div');

        var colorNum = 0;
        var colorStyle = '';

        var remain = index % 3;
        var time = Math.floor(index/3);

        if (remain == 0){
            colorNum = (time % colorsForTag_1.length);
            colorStyle = colorsForTag_1[colorNum];
        }else if (remain == 1){
            colorNum = (time % colorsForTag_2.length);
            colorStyle = colorsForTag_2[colorNum];
        } else if(remain == 2){
            colorNum = (time % colorsForTag_3.length);
            colorStyle = colorsForTag_3[colorNum];
        }


        var widthNum = getRandomInt(0,widthsForTag.length-1);
        var heightNum = getRandomInt(0,heightsForTag.length-1);

        element.classList.add('box');
        element.classList.add(colorStyle);
        element.classList.add(widthsForTag[widthNum]);
        element.classList.add(heightsForTag[heightNum]);
        element.innerHTML = value;
        return element;
    }

    function sleep(d){
        for(var t = Date.now();Date.now() - t <= d;);
    }

    function getRandomInt(min,max){

        return Math.floor(Math.random() * (max - min + 1)) + min;

    }

</script>
</body>
</html>

